<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8"/>
    <title>来和我们一起聊天吧</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" type="text/css" href="bootstrap-buttons/css/buttons.css"/>
    <link rel="stylesheet" type="text/css" href="css/chat.css"/>
    <script type="text/javascript" src="jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.cookie.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap-buttons/js/buttons.js"></script>
    <script type="text/javascript" src="js/jquery-web-socket.js"></script>
    <script type="text/javascript" src="js/chat.js"></script>

    <script type="text/javascript">
        var chat = $.cookie(CHAT_KEY);
        var chatName = $.cookie(CHAT_NAME_KEY);

        $(function () {
            $.get("/chat/path", function (result) {
                var url = result + "/chat/" + chat;
                if (chatName) {
                    url += ("?chatName=" + chatName);
                }

                $.webSocket.connect(url);

                var currentChatRoom = $.cookie(CURRENT_CHAT_ROOM_KEY);
                var parsedResult = JSON.parse(currentChatRoom);
                $("#chatRoom").append("<h1>" + parsedResult.label + "</h1>")
            });

            $("#message").keypress(function (event) {
                if (event.keyCode == 13) {
                    var $message = $("#message");
                    var text = $message.val();
                    $.webSocket.send(text);
                    $message.val('');
                }
            });
        });
    </script>
</head>
<body>
<table style="width: 100%;height: 100%">
    <tr>
        <td style="width:20%;height: 90%;border-right: 4px solid #000000">
            <ul id="onlineUsers" style="height: 90%;text-align: center" class="list-unstyled"></ul>
        </td>
        <td>
            <div id="chatRoom" style="text-align: center"></div>
            <div id="chat" style="height:450px;overflow-y: auto"></div>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="height: 10%;border-top: 4px solid #000000">
            <table style="width: 100%;height: 100%">
                <tr>
                    <td style="width: 86%;height: 100%;">
                        <input id="message" type="text" style="width: 100%;height: 100%;font-size: 18px; border:0"
                               maxlength="50"
                               placeholder="请发表法律允许范围内的言论，谢谢合作，切记聊天止于呵呵"/>
                    </td>
                    <td>
                        <table>
                            <tr>
                                <td style="padding: 2px">
                                    <a class="button button-rounded button-flat-caution" href="index.html">退出</a>
                                </td>
                                <td style="padding: 2px">
                                    <a class="button button-rounded button-flat" href="javascript:void(0)">备用</a>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding: 2px">
                                    <a class="button button-rounded button-flat" href="javascript:void(0)">备用</a>
                                </td>
                                <td style="padding: 2px">
                                    <a class="button button-rounded button-flat" href="javascript:void(0)">备用</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>